const Highcharts = require("highcharts");
require("highcharts/modules/exporting")(Highcharts);
import { numberFormat } from "./utils";

/**
 * @param {*} container
 * @param {*} data
 */
export default function draw({ container, data = [] }) {
  let num = Math.round(data.length / 2);
  let tickPositioner = [0, num - 1, data.length - 1];
  const arr1 = [];
  const arr2 = [];
  const arr = [
    // 切换数据
    {
      data: arr1,
      type: "spline",
      name: "A股质押总比例(左)",
      color: "#008FCE",
    },
    {
      data: arr2,
      type: "spline",
      name: "沪深300指数(右)",
      yAxis: 1,
      color: "#EA2827",
    },
  ];
  data.map((item, i) => {
    arr1.push({ x: i, y: item.zb / 100 });
    arr2.push({ x: i, y: item.zs });
  });
  const chartOptions = {
    chart: {
      spacing: [8, 15, 16, 15],
      marginTop: 50,
    },

    title: { text: "" },
    credits: { enabled: false },
    exporting: { enabled: false },
    legend: {
      symbolWidth: 20,
      symbolHeight: 4,
      align: "right",
      verticalAlign: "top",
      x: 14,
      y: 0,
      floating: true,
      labelFormatter() {
        return `<span style="color:${this.color}">${this.name}</span>`;
      },
    },
    xAxis: {
      tickPositioner: () => tickPositioner,
      labels: {
        align: "center",
        formatter() {
          return data[this.value].trade_date;
        },
      },
    },
    yAxis: [
      { title: "" },
      {
        title: "",
        opposite: true,
        labels: {
          align: "center",
          formatter() {
            return numberFormat(this.value);
          },
        },
      },
    ],
    series: arr,
    tooltip: {
      backgroundColor: "rgba(0, 0, 0, 0.7)",
      borderColor: "#666666",
      shared: true,
      formatter: function() {
        // 比较两个点的y轴坐标点的像素值
        const getPx = (point) => point.series.yAxis.toPixels(point.y);
        const isGreat = getPx(this.points[0]) - getPx(this.points[1]) >= 0;

        return this.points.reduce(function(prev, point) {
          const a = `${prev}<br/>`;
          const b = `<span style="font-size:14px;color:${point.color}">${
            point.series.name
          }: ${numberFormat(point.y)}</span><br/>`;

          return isGreat ? b + a : a + b;
        }, `${data[this.x].trade_date}`);
      },
    },
    plotOptions: {
      column: {
        borderWidth: 0,
      },
      spline: {
        lineWidth: 1,
        marker: {
          enabled: false,
          symbol: "circle",
        },
        states: {
          hover: {
            lineWidth: 1,
          },
        },
      },
    },
  };

  Highcharts.chart(container, chartOptions);

  return Highcharts;
}

/// 主题配置
Highcharts.theme = {
  chart: {
    backgroundColor: "#090910",
    plotBorderColor: "#606063",
  },
  xAxis: {
    gridLineColor: "#2C2C30",
    labels: {
      style: {
        color: "#E0E0E3",
      },
    },
    lineColor: "#2C2C30",
    minorGridLineColor: "#505053",
    tickColor: "#2C2C30",
  },
  yAxis: {
    gridLineColor: "#2C2C30",
    labels: {
      style: {
        color: "#E0E0E3",
      },
    },
    lineColor: "#2C2C30",
    minorGridLineColor: "#505053",
    tickColor: "#2C2C30",
    tickWidth: 1,
  },
  tooltip: {
    backgroundColor: "rgba(0, 0, 0, 0.85)",
    style: {
      color: "#F0F0F0",
    },
  },
  plotOptions: {
    series: {
      dataLabels: {
        color: "#F0F0F3",
        style: {
          fontSize: "13px",
        },
      },
      marker: {
        lineColor: "#333",
      },
    },
    boxplot: {
      fillColor: "#505053",
    },
  },
  labels: {
    style: {
      color: "#2C2C30",
    },
  },
};

Highcharts.setOptions(Highcharts.theme);
